<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>window 对象练习</title>
    <style>
        body {
            height: 2000px;
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        button {
            margin-top: 10px;
        }

        pre {
            background-color: #f4f4f4;
            padding: 10px;
            border-radius: 5px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>

<h1>window 对象练习</h1>

<button onclick="showWindowSize()">显示当前窗口大小</button>
<button onclick="openNewWindow()">打开新窗口</button>
<button onclick="closeCurrentWindow()">关闭当前窗口（需手动启用）</button>
<button onclick="scrollToTop()">回到顶部</button>
<button onclick="showGlobalVariable()">访问全局变量</button>

<pre id="output"></pre>

<script>
    // ==============================
    // ✅ window 是全局对象
    // ==============================

    // 全局变量会自动成为 window 的属性
    var globalMessage = "我是全局变量，可以通过 window.globalMessage 访问";

    function showGlobalVariable() {
        // 通过 window 可以访问全局变量
        document.getElementById("output").textContent =
            window.globalMessage;
    }

    // ==============================
    // ✅ window.innerWidth / innerHeight
    // 获取浏览器窗口的可视区域宽度和高度
    // ==============================
    function showWindowSize() {
        const width = window.innerWidth;
        const height = window.innerHeight;
        document.getElementById("output").textContent =
            `窗口宽度: ${width}px\n窗口高度: ${height}px`;
    }

    // ==============================
    // ✅ window.open()
    // 打开一个新窗口
    // ==============================
    let newWindow;

    function openNewWindow() {
        newWindow = window.open("https://www.baidu.com", "_blank", "width=400,height=300");
        if (newWindow) {
            alert("新窗口已打开！");
        } else {
            alert("请允许弹出窗口");
        }
    }

    // ==============================
    // ✅ window.close()
    // 关闭由 window.open() 打开的窗口
    // 注意：只能关闭自己打开的窗口
    // ==============================
    function closeCurrentWindow() {
        if (newWindow && !newWindow.closed) {
            newWindow.close();
            alert("新窗口已关闭");
        } else {
            alert("窗口未打开或已被关闭");
        }
    }

    // ==============================
    // ✅ window.scrollY / scrollTo()
    // 控制页面滚动位置
    // ==============================
    function scrollToTop() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth' // 平滑滚动
        });
    }

    // ==============================
    // ✅ window.onresize
    // 当窗口大小改变时触发
    // ==============================
    window.onresize = function () {
        console.log("窗口大小发生了变化");
    };

    // ==============================
    // ✅ window.alert / prompt / confirm
    // 常用的交互方法
    // ==============================
    function testUserInteraction() {
        alert("这是一个 alert 弹窗");

        const name = prompt("请输入你的名字：");
        if (name !== null) {
            alert("你好，" + name);
        }

        const isSure = confirm("确定要继续吗？");
        if (isSure) {
            alert("你点击了确定");
        } else {
            alert("你点击了取消");
        }
    }

    // 自动调用一次窗口大小显示
    window.onload = function () {
        showWindowSize();
    };
</script>

</body>
</html>
